<script setup lang="ts">
  import axios from "axios";
  import macros from "../macros.ts";
  import {Ref, ref} from "vue";
  import {useRoute} from "vue-router"
  const route=useRoute();
  var i=route.params.id;
  var getVideo= {
    id:i
  }
  var video={
    id:ref<number>(),
    title:ref<string>(),
    link:ref<string>()
  };
  axios.get(macros.server+"/api/video",{params:getVideo})
  .then(function (response){
    video.id.value=response.data.data.id;
    video.title.value=response.data.data.title;
    video.link.value=response.data.data.link;
    var videoElement=document.getElementById("video");
    var source=document.createElement("source");
    source.setAttribute("src",video.link.value);
    source.setAttribute("type","video/mp4")
    videoElement.appendChild(source);
  }).catch(function (error){
    alert(error);
    console.log(error);
  });

</script>

<template>
  <h2>{{video.title.value}}</h2>
  <video class="mx-auto d-block img-fluid" controls style="width: 100vw" id="video">
    <source :src="video.link.value">
    您的浏览器不支持 video 标签或H.264格式。请使用下列浏览器之一：Firefox、Chrome、Edge或Safari。
  </video>
</template>

<style scoped>

</style>